<template>
  <!-- :style="topSearchStyle" -->
  <div class="top-search">
    <div class="select-group">
      <el-popover
        placement="bottom-start"
        :width="220"
        popper-class="topPopperClass"
        trigger="click"
        show-arrow="false"
        ref="popoverParent"
      >
        <template #reference>
          <div class="city">
            {{ city.name }} <img src="./images/select.png" alt="" />
          </div>
        </template>
        <div class="city-list">
          <div
            class="city-item"
            v-for="(item, index) in CityData"
            :key="index"
            @click="citySelect(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-popover>
      <el-popover
        placement="bottom-start"
        :width="220"
        trigger="click"
        show-arrow="false"
        popper-class="topPopperClass"
        ref="popoverChild"
      >
        <template #reference>
          <div class="city">
            {{ county.name }} <img src="./images/select.png" alt="" />
          </div>
        </template>
        <div class="city-list">
          <div
            class="city-item"
            v-for="(item, index) in cildOption"
            :key="index"
            @click="countySelect(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as L from 'leaflet'
import { createTileLayer } from '@quickearth/leaflet'
import { predefinedImageTiles } from '@quickearth/core'
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
import apiList from '@/pages/integrated-monitoring/api/api'
import yulinGeojson from '@/assets/data/yulin1.json'
import yulinSideGeojson from '@/assets/data/yulin-side.json'
import taiyuanQxGeojson from '@/assets/data/taiyuan-qx.json'
const monitoringStore = useMonitoringStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const moduleVisible = computed(() => monitoringStore.moduleVisible)
const city = ref({
  name: '太原市',
  code: '140100'
})
const county = ref({
  name: '迎泽区',
  code: '140106'
})
const CityData = ref([])
const cildOption = ref([])
const getCityData = async () => {
  let { data } = await apiList.getCityList()
  CityData.value = [...data]
}
const getCountyList = async (id, name) => {
  let { data } = await apiList.getCountyList({ code: id })
  cildOption.value = [...data]
}
const filterElement = ref({
  city: '',
  county: '',
  latitude: '',
  longitude: ''
})
const popoverParent = ref(null)
const popoverChild = ref(null)
const citySelect = citys => {
  city.value = citys
  county.value = {
    name: '全部',
    code: '全部'
  }
  popoverParent.value.hide()
  filterElement.value.city = citys.code
  getCountyList(citys.code, citys.name)
}
const countySelect = countys => {
  county.value = countys
  popoverChild.value.hide()
  filterElement.value.county = countys.code
  filterElement.value.latitude = countys.latitude
  filterElement.value.longitude = countys.longitude
  useEventBus('handFilterData').emit(filterElement.value)
}

// 图层处理
const handleChangeMapStyle = val => {
  switch (val) {
    case 'xz':
      useEventBus('handleRemoveLayer').emit('tdtSatellite')
      useEventBus('handleAddLayer').emit(
        createTileLayer(predefinedImageTiles.tdtNormal),
        'tdtNormal'
      )
      break
    case 'wx':
      useEventBus('handleRemoveLayer').emit('tdtNormal')
      useEventBus('handleAddLayer').emit(
        createTileLayer(predefinedImageTiles.tdtSatellite),
        'tdtSatellite'
      )
      break
  }
}
const colorTransparentMapStyle = {
  fillColor: '#Fff',
  weight: 4,
  opacity: 1,
  color: '#06FEFF',
  fillOpacity: 0
}
const loadQhWhite = () => {
  useEventBus('handleRemoveLayer').emit('qhWhite')
  useEventBus('handleAddLayer').emit(
    L.geoJSON(yulinSideGeojson, {
      style: colorTransparentMapStyle
    }),
    'qhWhite'
  )
}
const handleShowGeoJson = val => {
  useEventBus('handleRemoveLayer').emit('yulinWhite')
  useEventBus('handleRemoveLayer').emit('yulinSideWhite')
  useEventBus('handleInitLayer').emit(yulinGeojson, {
    name: 'yulinSideWhite',
    select: ''
  })

  loadQhWhite()
}
onMounted(() => {
  handleChangeMapStyle('wx')
  getCountyList('140100')
  getCityData()
  monitoringStore.componentsVisible.xm = true
  monitoringStore.componentsVisible.zdmc = true
  monitoringStore.componentsVisible.zh = true
})
</script>

<style lang="scss" scoped>
.top-search {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 48px;
  border-radius: 4px 4px 4px 4px;
  z-index: 1200;
  transition: all 0.4s;
  box-sizing: border-box;
  color: #fff;
  .select-group {
    width: 450px;
    height: 48px;
    display: flex;
    justify-content: space-between;

    .line {
      width: 1px;
      height: 18px;
      margin-top: 8px;
      opacity: 0.29;
    }
  }
  .checkout-group {
    margin-top: 8px;
    .row {
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-checkbox {
        width: 60%;
      }
      .el-checkbox:last-child {
        width: 30%;
      }
    }
  }
  .interval {
    display: inline-block;
    padding-bottom: 3px;
    margin-right: 10px;
  }

  .el-checkbox {
    --el-checkbox-text-color: #fff;
    margin-right: 10px;

    .input-detail {
      display: flex;
      align-items: center;
      justify-content: center;

      :deep(.el-input-number) {
        width: 43px;
        height: 22px;
        margin: 0 5px;

        .el-input-number__decrease,
        .el-input-number__increase {
          display: none;
        }

        .el-input__wrapper {
          padding: 0;
        }
      }
    }
  }

  .el-radio {
    --el-radio-text-color: #fff;
    margin-right: 10px;
  }
  .city {
    width: 200px;
    text-align: left;
    line-height: 35px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
      90deg,
      rgba(7, 189, 255, 0.43) 0%,
      rgba(0, 140, 234, 0) 100%
    );
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #46c8ff;
    img {
      width: 10px;
      height: 4px;
    }
  }
}
</style>
<style lang="scss">
.el-input__wrapper {
  background-color: transparent !important;
  box-shadow: 0 0 0 0 transparent !important;
}
.el-input--large .el-input__inner {
  height: 33px !important;
  color: #fff !important;
  font-size: 14px !important;
}
.topPopperClass {
  width: 280px !important;
  padding: 0 !important;
  border-radius: 5px;
}
.el-popover.el-popper {
  background: rgba(2, 19, 43, 0.69);
  border: 1px solid rgba(34, 249, 255, 0.23);
}
.city-list {
  width: 100%;
  height: 200px;
  overflow-y: auto;
  border-radius: 5px;
}
.city-item {
  width: 100%;
  height: 30px;
  font-size: 14px;
  color: #fff;
  line-height: 30px;
  padding-left: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.city-item:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.el-popper__arrow {
  display: none;
}
</style>
